<template>
  <div>
    <el-table :data="data" stripe style="width: 100%">
      <el-table-column prop="id" label="选择" type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="realname" label="红娘姓名" />
      <el-table-column prop="phone" label="红娘电话" />
      <el-table-column prop="wechat" label="红娘微信" />
      <el-table-column prop="cdate" label="创建日期" sortable/>
      <el-table-column>
        <!-- 注意这个是必须是要对row解构，如果不解构就会导致显示的是新增而不是修改页面 ，因为下面的修改这个方法也是根据row这一行的id进行修改的-->
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="editUser(row)" >修改</el-button>
          <el-button link type="danger" size="small" @click="removeUser(row)">删除</el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="65"
      :current-page="page"
      @current-change="changePage"
      class="pagination"
    />
  </div>
</template>

<script setup lang="ts">
import { dataTool, number } from 'echarts';
import type {UserListType} from '../../../typings/ladyType'

interface IProps {
  data: UserListType[]
  total: number
  loadData: (page: number) => void;
  page: number;
  setVisible:(v:boolean,id:number)=>void
}
interface IEmits {
  (e: "setrow", v: any): void;
  
}
const props = defineProps<IProps>();
const emit = defineEmits<IEmits>();
const changePage = (page: number) => {
  props.loadData(page);
};
const editUser=(row:any)=>{
  emit('setrow',row)
  
  props.setVisible(true,row.id)
  console.log(row,'即将回显')
}
const removeUser=(row:UserListType)=>{
 props.data.splice(row.id,1)
 console.log(row,'即将删除')
}

</script>
<style scoped lang="scss">
.el-pagination{
  // 让按钮水平居中
  display: flex;
  justify-content: center;
}
:deep(.el-table tr){
  height: 62px;
}

</style>
